<template>
    <div style="margin-top:10px;">
        <a-spin :loading="loading" style="width:100%;">
        <div class="pscl_top">
            <div class="pscl_top_item">
                <div style="font-weight:bold; color:#000;">等待装车</div>
                <div>
                    <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{top_data.dzc_count}}</span>
                    <span>辆</span>
                </div>
            </div>
            <div class="pscl_top_item">
                <div style="font-weight:bold; color:#000;">装车中</div>
                <div>
                    <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{top_data.zcz_count}}</span>
                    <span>辆</span>
                </div>
            </div>
            <div class="pscl_top_item">
                <div style="font-weight:bold; color:#000;">运输中</div>
                <div>
                    <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{top_data.ycz_count}}</span>
                    <span>辆</span>
                </div>
            </div>
            <div class="pscl_top_item">
                <div style="font-weight:bold; color:#000;">空闲</div>
                <div>
                    <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{top_data.kxz_count}}</span>
                    <span>辆</span>
                </div>
            </div>
            <div class="pscl_top_item">
                <div style="font-weight:bold; color:#000;">异常</div>
                <div>
                    <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{top_data.yc_count}}</span>
                    <span>辆</span>
                </div>
            </div>
        </div>
        <div style="height:435px">
            <a-table :columns="columns" :pagination="false" :data="data" :scroll="{y:400 }" />
        </div>
    </a-spin>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import syApi from "@/api/home/sy";
import tool from '@/utils/tool'
const loading = ref(false)
onMounted(() => {
    getPsclList()
})
const top_data = ref({
    dzc_count: 0,
    kxz_count: 0,
    yc_count: 0,
    ycz_count: 0,
    zcz_count: 0
})
const getPsclList = () => {
    loading.value = true
    syApi.getPsclList().then((res) => {
        console.log(res)
        if (res.code == 200 && res.success) {
           
            data.value = res.data.car_list
            top_data.value = res.data.top_data
            loading.value = false
        }else{
            console.log(e)
            loading.value = false
        }
    }).catch((e) => {
        console.log(e)
        loading.value = false
    })
}
    const columns = [
      {
        title: '车辆',
        dataIndex: 'car_no',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      },
      {
        title: '状态',
        dataIndex: 'status_text',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      },
      {
        title: '位置',
        dataIndex: 'site',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      }
    ];
    const data = ref([]);

</script>
<style scoped lang="less">
.pscl_top{
    display:flex; 
    align-item:center;
    justify-content: space-between;
    margin:10px 0;
    height: 70px;
    .pscl_top_item{
        width:calc(20% - 10px);
        background-color:#FAFAFA;
        padding:10px 20px;
        border-radius:10px;
    }
}
</style>